* {
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.box {
    position: relative;
    width: 300px;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 200px auto;
    transform-style: preserve-3d;
    transform-origin: 0 0;
    transition: 2s;
}

.box div {
    width: 300px;
    height: 100px;
    position: absolute;
    text-align: center;
    line-height: 100px;
    left: 0;
    top: 0;
    transform-origin: 50% 100%;
}

.box .top {
    width: 300px;
    height: 100px;
    position: absolute;
    text-align: center;
    line-height: 100px;
    left: 0;
    top: 0;
    background-color: green;
}

.box .down {
    width: 300px;
    height: 100px;
    position: absolute;
    text-align: center;
    line-height: 100px;
    left: 0;
    top: 0;
    background-color: red;
    transform: rotateX(90deg);
}

.box:hover {
    transform: rotateX(90deg);
}